<template>
  <div
    ref="className"
    :class="className"
    :style="{
      height: height,
      width: width,
    }"
  />
</template>

<script>
import * as echarts from "echarts";
import { chartOption } from "./option.js";
export default {
  name: "EChart",
  props: {
    // 图表数据
    lineChartAll: {
      type: Array,
      default: () => [],
    },
    xAxis: {
      type: Array,
      default: () => [],
    },
    name: {
      type: String,
      default: "",
    },
    //拖拽工具
    percentOfTen: {
      type: String,
    },
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: 297 + "px",
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  created() {},
  mounted() {
    this.initChart(this.lineChartAll, this.xAxis, this.name, this.percentOfTen);
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    /**
     * 图表创建初始化
     */
    initChart(data, xAxis, name, percentOfTen) {
      const option = chartOption(data, xAxis, name, percentOfTen);
      this.$echarts.getInstanceByDom(this.$el) ||
        (this.chart = echarts.init(this.$el, "macarons"));
      this.chart.setOption(option, true);
      // let this_ = this;
      // this.chart.on("click", function (params) {
      //   // 控制台打印数据的名称
      //   this_.$emit("chartClick", params);
      //   // console.warn("数据数据", params);
      // });
    },
  },
};
</script>
